<template>
  <div>
    <router-view />
    <van-tabbar v-model="active" :route="true">
      <van-tabbar-item
        :to="item.href"
        :active-color="index === active ? '#3b98ff' : '#bfc7d1'"
        v-for="(item, index) in list"
        :key="index"
      >
        <template #icon="props">
          <img :src="props.active ? item.url1 : item.url" />
        </template>
        {{ item.title }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref, reactive } from "vue";

export default {
  setup() {
    const list = reactive([
      {
        href: "/home/index",
        url: require("@/assets/img/shouye1.webp"),
        title: "首页",
        url1: require("@/assets/img/shouye.webp")
      },
      {
        href: "/home/class1",
        url: require("@/assets/img/class1.webp"),
        title: "课程",
        url1: require("@/assets/img/class.webp")
      },
      {
        href: "/home/growup",
        url: require("@/assets/img/chengzhang1.webp"),
        title: "成长",
        url1: require("@/assets/img/chengzhang.webp")
      },
      {
        href: "/home/mine",
        url: require("@/assets/img/mine1.webp"),
        title: "我的",
        url1: require("@/assets/img/mine.webp")
      }
    ]);
    const active = ref(0);
    return {
      active,
      list
    };
  }
};
</script>
<style lang="less" scoped></style>
